<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<!-- <script type="text/javascript" src="js/jquery-3.4.1.js"></script> -->
		<script src="layui/layui.js" type="text/javascript"></script>
	</head>
	<body>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		 
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
			<div class="layui-row">
			  <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="blukeDelete">批量删除</button>
			  <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="searchUser">查找</button>
			  <!-- <input type="text" name="keyword" required lay-verify="required" id="keyword" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="width: 50%;height: 30px;margin-right: 20px;"> -->
		    </div>
		  </div>
		</script>
		 
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		              
		<script>
			layui.use('table', function(){
			  var table = layui.table,
			  $ = layui.$;
			  $.ajaxSetup({
			  	xhrFields: {
			  		withCredentials: true
			  	}
			  });
			  
			  table.render({
				elem: '#test'
				,id : 'tableTest'
				,url:'http://localhost:8080/user/list'
				,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
				,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				  title: '提示'
				  ,layEvent: 'LAYTABLE_TIPS'
				  ,icon: 'layui-icon-tips'
				}]
				,title: '用户数据表'
				,cols: [[
				  {type: 'checkbox', fixed: 'left'}
				  ,{field:'id', title:'序号', width:100, fixed: 'left', unresize: true, sort: true}
				  ,{field:'name', title:'用户名', width:200}
				  ,{field:'password', title:'密码', width:200}
				  ,{field:'userType', title:'用户类别', width:200,templet: function(res){
					return '<span>'+ res.userType.name +'</span>'
				  }}
				  ,{field:'status', title:'用户状态', width:200, templet: function(res){
					  return '<span>'+ (res.status === 1 ? '正常状态' : '冻结状态') +'</span>'
				  }}
				  ,{field:'lastModifyTime', title:'最后修改时间', width:200}
				  ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
				]]
				,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					  layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
					  //,curr: 5 //设定初始在第 5 页
					  ,groups: 5 //只显示 1 个连续页码
					  ,first: false//不显示首页
					  ,limits : [2,5,8,10]
					  ,limit : 2
					  ,last: false ,//不显示尾页
					}
			  });
			  let opena;
			  
			  //头工具栏事件
			  table.on('toolbar(test)', function(obj){
				var checkStatus = table.checkStatus(obj.config.id);
				switch(obj.event){
				  case 'blukeDelete':
					var data = checkStatus.data;
					let ids = [];
					data.forEach((dataObj) => {
						ids.push(dataObj.id)
					})
				
					
					layer.confirm('真的删除所选数据么', function(index){

						  $.ajax({
							  url : `http://localhost:8080/user/bulkdelete`,
							  data : JSON.stringify(ids),
							  contentType : 'application/json;charset=utf8',
							  type : 'post',
							  dataType : 'json',
							  success : (resp) => {
								  if(resp.code === 200){
									  layer.msg(resp.msg + ",删除了" + resp.data + "条数据");
									  table.reload('tableTest', {
										url: 'http://localhost:8080/user/list',
										where: {} //设定异步数据接口的额外参数
									  });
								  }else{
									  layer.msg(resp.msg);
								  }
							  }
						  })
						  layer.close(index);
					  });
				  break;
				  case 'searchUser':
				    opena = layer.open({
				      type: 1, 
				      content: `
						<div style="width:400px;height:150px;padding-top:30px;box-sizing: border-box;">
						    <div class="layui-row">
						        <div class="layui-col-md3" style="line-height: 38px;height: 38px;text-align: center;">
						          用户名:
						        </div>
						        <div class="layui-col-md9">
						          <input type="text" name="keyword" required lay-verify="required" id="keyword" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="width:80%">
						        </div>
						      </div>
							  <div class="layui-row">
							      <div class="layui-col-md12" style="text-align:center;margin-top: 20px;">
							        <button id="btna" class="layui-btn layui-btn-normal">查找</button>
							      </div>
							    </div>	
						</div>
					  ` //这里content是一个普通的String
				    });
					// let keyWord = $("#keyword").val();
					// layer.alert('这是工具栏右侧自定义的一个图标按钮');
				  break;
				  //自定义头工具栏右侧图标 - 提示
				  case 'LAYTABLE_TIPS':
					layer.alert('这是工具栏右侧自定义的一个图标按钮');
				  break;
				  default:
				   layuer.alert('亲，你选错了');
				};
				
				$("#btna").click(function(){
				  let keyword = $("#keyword").val();
				  table.reload('tableTest', {
				    url: 'http://localhost:8080/user/list'
				    ,where: {
						keyword
					} //设定异步数据接口的额外参数
				    //,height: 300
				  });
				  layer.close(opena)
				})
			  });
			  
			  
			  
			  //监听行工具事件
			  table.on('tool(test)', function(obj){
				var data = obj.data;
				//console.log(obj)
				if(obj.event === 'del'){
				  layer.confirm('真的删除行么', function(index){
					  $.ajax({
						  url : `http://localhost:8080/user/delete/${data.id}`,
						  type : 'get',
						  dataType : 'json',
						  success : (resp) => {
							  if(resp.code === 200){
								  layer.msg(resp.msg);
								  table.reload('tableTest', {
								    url: 'http://localhost:8080/user/list',
									where: {} //设定异步数据接口的额外参数
								  });
							  }else{
								  layer.msg(resp.msg);
							  }
						  }
					  })
					layer.close(index);
				  });
				} else if(obj.event === 'edit'){
				  layer.prompt({
					formType: 2
					,value: data.email
				  }, function(value, index){
					obj.update({
					  email: value
					});
					layer.close(index);
				  });
				}
			  });
			});
		</script>
	</body>
</html>
